1jun2010

Comprimir los estilos CSS

CSS Compressor como su nombre indica es un compresor de CSS, resulta útil si queremos que los estilos de nuestra plantilla no se hagan interminables, por lo que he comprobado no altera ni suprime ninguna propiedad pero sobra decir que el vista previa hay que usarlo tantas veces sea necesario.

Un ejemplo de estilos para el body:

body {
background:#FFF;
margin: 0;
padding: 0;
color:#333333;
font-family: 'Trebuchet MS', Trebuchet, Helvetica, Arial, Verdana, Sans-Serif;
font-size: 14px;
text-align: left;
}

Una vez comprimidos nos resultaría lo siguiente:

body{background:#FFF;margin:0;padding:0;color:#333;font-family:'Trebuchet MS',Trebuchet,Helvetica,Arial,Verdana,Sans-Serif;font-size:14px;text-align:left}

@rielCastellanos: Muchas Gracias. Muy interesante. Una pregunta... realmente impacta el css? digo, en una entrada hay mucho texto, no seria casi lo mismo? hara la diferencia un par de caracteres menos? dudas q m salen, gracias; 1.6.10
Unknown: Muy interesante, lo pruebo; 1.6.10
Anónimo: La verdad es que comprime bastante. El problema, en mi opinión, es que cuando quieras editar ese CSS va a resultar más difícil que se estuviera expandido, no?; 1.6.10
Unknown: Gem@ te hago esta pregunta luego de haberme recorrido todo, buscado
¿cómo hago para que las últimas entradas queden en minúsculas como lo tienes vos?

Gracias; 1.6.10
Gem@: @rielCastellanos en la carga del blog afectan muchas cosas una de ellas es los estilos css, el dejar espacios en blanco o tener estilos que no utilizamos. Por otra parte lo que conseguimos es aligerar la plantilla de forma que no sea extremadamente larga.

Graciela prueba añadiendo unos estilos para las últimas entradas por ejemplo:
#Feed1_feedItemListDisplay li {
text-transform: none;
}

Con text-transform: none el texto se muestra tal y como lo escribimos, ahí mismo puedes añadir otros estilos como text-decoration:none para qu eno quede subrayado el enlace, borde, fondo o tamaño del texto.

#Feed1_feedItemListDisplay li {
text-transform: none;
background-color: #ccc;
border-bottom: 1px solid #C0C0C0;
border-top: 1px solid #C0C0C0;
text-decoration:none;
font-size: 12px;
}

Carlos eso es ya a gusto personal de cada uno. Yo no le veo problemas pero claro está hay que cuidar de no borrar nada si hacemos cambios; 2.6.10
Unknown: Tesoro he intentado, perdona la molestia

en qué luegar ubico lo que dices, gracias!; 2.6.10
Gem@: Antes de ]]></b:skin> es donde hay que añadir los estilos Graciela; 2.6.10
Anónimo: Hola Gem@ !! ...

Bueno no se donde dejarte este comen jeeje...pero solo queria hacerte una pregunta, no se si te molestaria decirme como hago para que mi Blog tenga un Buscador como el tuyo?, el que aparece una barra de color roja sobre la de google...; 2.6.10
Unknown: Tesoro intenté ahí, pero no cambia nada; 2.6.10
Unknown: Bien he vuelto a lo que tenía, no se deja la plantilla Piedra Preciosa, he intentado pero no.

Muchas gracias igualmente; 2.6.10
Chon: Estoy "intentando" diseñar un fondo para un blog educativo en mi colegio. Es de Blogguer. ¿Cual debe ser la medida de dicho fondo?
Las pruebas que he hecho se ven muy pequeñas, y si las repito se ven feas.; 3.6.10
Gem@: Graciela nos estamos refiriendo al gadget de las últimas entradas verdad? es que he mirado en tu blog y el texto lo tienes igual que yo sólo cambia los títulos que los tienes en mayúscula.
Parece que los títulos los tienes en esta parte:
#BlogList1 .blog-title{
display:none;
}
Pero me confunde porque display:none es para ocultarlos, así que si te refieres al texto y no a los títulos prueba en los siguiente estilos que tienes añadidos en tu plantilla:
#BlogList1 .item-thumbnail{
float:right;
font-family: 'Droid Sans', arial, serif;
font-size: 12px;
height: auto;
border: 2px dotted #f2f8f8;
padding: 10px 5px 10px 22px;
text-transform: none;
}

Esa es la parte que indica los estilos del gadget de últimas entradas ahí están las miniaturas y el texto si añades text-transform: none; se muestra tal y como lo escribimos..

Alicia en la siguiente url hablo de ese buscador:
http://gemablog-.blogspot.com/2009/09/mi-buscador-interno.html

Chon todo depende de la imagen que deseas mostrar como fondo, si es tipo fotografía resulta complicado que ocupe todo el fondo porque influye mucho la resolución de pantalla que estamos usando ya que todos no usamos la misma y unos la verán ocupando toda la pantalla mientras que otros pueden ver espacios vacíos sin que lleguen a ser ocupados por la imagen.
Te recomiendo leer esta entrada:
http://gemablog-.blogspot.com/2009/05/anadir-imagenes-y-texturas-de-fondo.html; 3.6.10
Unknown: Gracias Piedra Preciosa; 4.6.10
Gem@: Ya me dirás si resulta Graciela; 4.6.10
Nicar: Hola Gema.
Tenía ganas de comprimir el css pero el hacerlo a mano me daba mucha vagancia. Con esta herramienta lo estoy haciendo en un "periquete". Cuando iba a guardar los cambios me di cuenta que falta el punto y coma en la última propiedad. No tengo claro que blogger lo acepte. En vista previa parece que está todo correcto.Los cambios los guardé en el bloc de notas por si me atrevo a hacerlos todos a la vez. Según lo que me aconsejes.
Muchas gracias.; 28.6.10
Gem@: Nicar el punto y coma después de cada propiedad es necesario si el compresor lo elimina y resulta correcto en vista previa es extraño, fíjate porque a lo mejor ha suprimido o sustituido alguna propiedad o que lo añada más abajo.
En esto como en todo siempre hay que tener precauciones, mi recomendación siempre es la misma probar en un blog distinto pero no este cambio sino cualquier cambio es la única forma de familiarizarse con la plantilla y evitar errores innecesarios; 28.6.10
Nicar: Hola Gema.
El punto y coma solo falta al final de cada regla CSS. En el ejemplo que pones ocurre lo mismo.
La solución la tengo fácil: poner a mano el punto y coma que falta.
Gracias por contestar.; 28.6.10
Gem@: Lamento no ver tu comentario antes Nicar; 3.7.10
Nicar: No tiene ninguna importancia Gema. No me imagino como puedes contestar tantos comentarios.
Saludos.; 3.7.10
Gem@: Para mi si la tiene Nicar, no responder los comentarios es como no responder a un saludo; 3.7.10
Anónimo: Gracias , necesiataba esta informacion; 19.10.10